{% extends 'base.html' %}
{% load static %}
{% block content %}
    <div class="banner-bg w1200">
      <h3>夏季清仓</h3>
      <p>宝宝被子、宝宝衣服3折起</p>
    </div>
    <div class="cart w1200">
      <div class="cart-table-th">
        <div class="th th-chk">
          <div class="select-all">
            <div class="cart-checkbox">
              <input class="check-all check" id="allCheckked" type="checkbox" value="true">
            </div>
          <label>&nbsp;&nbsp;全选</label>
          </div>
        </div>
        <div class="th th-item">
          <div class="th-inner">
            商品
          </div>
        </div>
        <div class="th th-price">
          <div class="th-inner">
            单价
          </div>
        </div>
        <div class="th th-amount">
          <div class="th-inner">
            数量
          </div>
        </div>
        <div class="th th-sum">
          <div class="th-inner">
            小计
          </div>
        </div>
        <div class="th th-op">
          <div class="th-inner">
            操作
          </div>
        </div>  
      </div>
      <div class="OrderList">
        <div class="order-content" id="list-cont">


        {% for c in commodityInfos %}
          <ul class="item-content layui-clear">
            <li class="th th-chk">
              <div class="select-all">
                <div class="cart-checkbox">
                  <input class="CheckBoxShop check" id="" type="checkbox" num="all" name="select-all" value="true">
                </div>
              </div>
            </li>
            <li class="th th-item">
              <div class="item-cont">
                <a href="javascript:;"><img src="{{ c.img.url }}" alt=""></a>
                <div class="text">
                  <div class="title">{{ c.name }}</div>
                  <p><span>{{ c.sezes }}</span></p>
                </div>
              </div>
            </li>
            <li class="th th-price">
              <span class="th-su">{{ c.price }}</span>
            </li>
            <li class="th th-amount">
              <div class="box-btn layui-clear">
                <div class="less layui-btn">-</div>
                  {% for k, v in commodityDcit.items %}
                      {% if c.id == k %}
                        <input class="Quantity-input" value="{{ v }}" disabled="disabled">
                      {% endif %}
                  {% endfor %}
                <div class="add layui-btn">+</div>
              </div>
            </li>
            <li class="th th-sum">
              <span class="sum">0</span>
            </li>
            <li class="th th-op">
              <span class="dele-btn">删除</span>
              <p hidden="hidden">{{ c.id }}</p>
            </li>
          </ul>
          {% endfor %}


        </div>
      </div>
      <div class="FloatBarHolder layui-clear">
        <div class="th th-chk">
          <div class="select-all">
            <div class="cart-checkbox">
              <input class="check-all check" id="" name="select-all" type="checkbox"  value="true">
            </div>
            <label>&nbsp;&nbsp;已选<span class="Selected-pieces">0</span>件</label>
          </div>
        </div>
        <div class="th batch-deletion">
          <span class="batch-dele-btn">删除全部</span>
          <p hidden="hidden" id="userId">{{ user.id }}</p>
        </div>
        <div class="th Settlement">
          <button class="layui-btn" id="settlement">结算</button>
        </div>
        <div class="th total">
          <p>应付：<span class="pieces-total">0</span></p>
        </div>
      </div>
    </div>
{% endblock content %}

{% block script %}
  layui.config({
    base: '{% static 'js/' %}'
  }).use(['mm','jquery','element','car'],function(){
    var mm = layui.mm,$ = layui.$,element = layui.element,car = layui.car;
    car.init();

    $(function(){
    var counts = 0;
	$(".sum").each(function(i,e){
	  var quantity = $('.th-su')[i].innerHTML
      var price = $('.Quantity-input')[i].value
      e.innerHTML = (quantity * price).toFixed(2)
      counts = counts*1 + e.innerHTML*1
	});
    $(".pieces-total").text("￥" + counts.toFixed(2))
    });

    $("#settlement").on('click',function(){
        var total = $(".pieces-total").text()
        window.location = "{% url 'shopper:pays' %}?total=" + total
    })
});

{% endblock script %}